<script>
import Context from "@/components/Context.vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "ContextBox",

  components: {Context},
  data(){
    return {
      cardsArr:null,
      userId:-1
    }
  },
  methods:{
    deleteCard(item){
      console.log(item);
      ElMessageBox.alert("你确定要删除吗(删除后不可恢复！)",'',{
        showCancelButton: true,
        cancelButtonText:'我再想想',
        confirmButtonText:'确定',
        type: 'warning',
      }).then(()=>{

        axios.get(`http://113.44.66.99:8080/delete?cardId=${item.contentCardId}`).then((res)=>{
          ElMessage({
            type:"success",
            message:'成功删除'
          })
        })
        console.log("删除")
      }).catch(()=>{
        ElMessage({
          type:"error",
          message:'取消删除'
        })
      })
    }
  },
  created(){
    const url=new URLSearchParams(window.location.search);
    this.userId=url.get("userId");
  },
  mounted() {

    axios.get(`http://113.44.66.99:8080/getCardInfoByUserId?userId=${this.userId}`).then((response) => {
      this.cardsArr = response.data.data;

    })
  }
}
</script>

<template>
  <div class="w-2/3 border flex">
    <div class="w-3/12   mr-5  flex flex-col ">
      <div class="h-20 text-center  hover:cursor-pointer hover:brightness-50 text-4xl" @click="getMusicCard">
        我发布的资源》》》
      </div>
      <div class=" h-20  text-center  hover:cursor-pointer hover:brightness-50">

      </div>
      <div class="h-20 text-center  hover:cursor-pointer hover:brightness-50"@click="getPicCard">

      </div>
    </div>
    <div class="w-7/12 bg-stone-700/15 ">

      <context v-for="item in cardsArr">
        <template v-slot:category>
          {{item.category}}
        </template>
        <template v-slot:title>{{item.contextTitle}}</template>
        <template v-slot:userPic>
        <div class="relative"><el-button class="absolute right-0"@click="deleteCard(item)">删除</el-button></div>
        </template>
        <template v-slot:content>
          <div v-if="item.category==='图片'"><a :href="'/cardMessage.html?CardId='+item.contentCardId"><img :src="item.contentResource" class=""></a></div>
          <div v-if="item.category==='音乐'"><audio controls :src="item.contentResource"></audio></div>
        </template>
        <template v-slot:encourage>{{item.encourageCount}}<svg  t="1734422283885" class="icon mr-10 hover:cursor-pointer hover:brightness-150" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1661" width="32" height="32"><path d="M229.3 403.43h200.31v396.86H229.3z" fill="#D0E2F3" p-id="1662"></path><path d="M352.65 403.43h76.96v396.86h-76.96z" fill="#A0C8EA" p-id="1663"></path><path d="M429.61 818.4H229.3c-10 0-18.12-8.11-18.12-18.12V403.43c0-10 8.11-18.12 18.12-18.12h200.31c10 0 18.12 8.11 18.12 18.12v396.86c-0.01 10-8.12 18.11-18.12 18.11z m-182.19-36.23h164.07V421.54H247.42v360.63z" fill="#49416F" p-id="1664"></path><path d="M618.68 266.53v172.42h29.79v0.09h111.07c21.93 0 40.8 16.85 41.83 38.76 1.1 23.39-17.53 42.7-40.68 42.7h-25.84c23.15 0 41.78 19.31 40.68 42.7-1.03 21.91-19.9 38.76-41.83 38.76H709c23.15 0 41.78 19.31 40.68 42.7-1.03 21.91-19.9 38.76-41.83 38.76h-24.69c23.15 0 41.78 19.31 40.68 42.7-1.03 21.91-19.9 38.76-41.83 38.76h-252.4V438.95h55.26l41.21-182.73c4.82-21.38 23.81-36.57 45.73-36.57 25.89 0 46.87 20.99 46.87 46.88z" fill="#FFFFFF" p-id="1665"></path><path d="M682.01 782.97h-252.4c-10 0-18.12-8.11-18.12-18.12v-325.9c0-10 8.11-18.12 18.12-18.12h40.77l38.02-168.6c6.73-29.85 32.81-50.7 63.4-50.7 35.84 0 65 29.16 65 65v154.3h11.67c0.61 0 1.22 0.03 1.82 0.09h109.25c32.12 0 58.44 24.61 59.93 56.02 0.77 16.26-4.98 31.68-16.19 43.43-4.88 5.12-10.64 9.27-16.92 12.32 5.26 9.45 7.8 20.2 7.27 31.35-1.03 22.04-14.3 40.73-33.22 49.92 5.33 9.49 7.91 20.31 7.38 31.53-1.04 22.04-14.3 40.73-33.22 49.92 5.33 9.49 7.91 20.31 7.38 31.53-1.49 31.43-27.82 56.03-59.94 56.03z m-234.29-36.23h234.29c12.53 0 23.18-9.64 23.74-21.5 0.29-6.27-1.92-12.21-6.22-16.72-4.31-4.52-10.12-7.01-16.36-7.01-10 0-18.12-8.11-18.12-18.12s8.11-18.12 18.12-18.12h24.69c12.53 0 23.18-9.64 23.74-21.49 0.29-6.27-1.92-12.21-6.22-16.72-4.31-4.52-10.12-7.01-16.36-7.01-10 0-18.12-8.11-18.12-18.12 0-10 8.11-18.12 18.12-18.12h24.69c12.53 0 23.18-9.64 23.73-21.49 0.29-6.27-1.91-12.21-6.22-16.72-4.31-4.52-10.12-7.01-16.36-7.01-10 0-18.12-8.11-18.12-18.12s8.11-18.12 18.12-18.12h25.84c6.24 0 12.05-2.49 16.36-7.01 4.31-4.51 6.51-10.45 6.22-16.72-0.56-11.85-11.2-21.5-23.73-21.5H648.47c-0.61 0-1.22-0.03-1.82-0.09h-27.97c-10 0-18.12-8.11-18.12-18.12V266.53c0-15.86-12.9-28.76-28.76-28.76-13.54 0-25.08 9.23-28.06 22.44l-41.2 182.73a18.112 18.112 0 0 1-17.67 14.13h-37.14v289.67z" fill="#49416F" p-id="1666"></path></svg> <a :href="'/cardMessage.html?CardId='+item.contentCardId">详细信息/评论</a></template>
      </context>

    </div>
    <div class=" grow ">
      <div class="top-20 ml-5 sticky text-center items-center">
        <img src="/二维码.png" class="h-40 w-40 ">
        若有问题请联系
      </div>
    </div>
  </div>
</template>


<style scoped>

</style>